<template>
    <div class="userinfo">userinfo</div>
    <m-tabbar fixed fill :current="2" :tabbar="tabbar" @onBeforeChange="onBeforeChange">
        <template v-slot:tabbar_index_1>
            <view class="custom_style">
                <view class="iconfont icon-shouye1 custom_style_icon"></view>
            </view>
        </template>
    </m-tabbar>
</template>
<script>
export default {
    data() {
        return {
            tabbar: {
                color: "#7a7e83",
                selectedColor: "#fb4736",
                backgroundColor: "#f7f7f7",
                list: [{
                    pagePath: "pages/teacher/itemList",
                    text: "班级管理",
                    iconPath: "/static/img/manage.png",
                    selectedIconPath: "/static/img/manage-hover.png"
                }, {
                    pagePath: "",
                    text: "扫码签到",
                    iconPath: "",
                    selectedIconPath: ""
                },
                {
                    pagePath: "pages/teacher/userinfo",
                    text: "个人中心",
                    iconPath: "/static/img/userinfo.png",
                    selectedIconPath: "/static/img/userinfo-hover.png"
                }]
            }
        }
    },
    methods: {
        onBeforeChange(next, index) {
            console.log(index)
        }
    }
}
</script>
<style lang="scss" scoped>
.userinfo {
    width: 100%;
    height: 100%;
}

.custom_style {
    color: #FD3523;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;

    &_icon {
        background-color: #FD3523;
        color: #fff;
        font-size: 80rpx;
        width: 120rpx;
        height: 120rpx;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -40rpx;
    }
}
</style>
